@use './media.token.scss' as *;
@use '../mixin/common.scss' as *;

@use './icon.scss' as *;
@use './button.scss' as *;
@use './toggle.scss' as *;
@use './link.scss' as *;
@use './switch.scss' as *;
@use './radio.scss' as *;
@use './checkbox.scss' as *;
@use './input.scss' as *;
@use './progress.scss' as *;
@use './option.scss' as *;
@use './select.scss' as *;
@use './message.scss' as *;
@use './dialog.scss' as *;
@use './rate.scss' as *;
@use './tag.scss' as *;
@use './textarea.scss' as *;
@use './upload.scss' as *;
@use './pagination.scss' as *;
@use './tab.scss' as *;
@use './table.scss' as *;
@use './carousel.scss' as *;
@use './menu.scss' as *;
@use './cascader.scss' as *;
@use './dropdown.scss' as *;
@use './card.scss' as *;
@use './form.scss' as *;
@use './popup.scss' as *;
@use './scroll.scss' as *;
@use './breadcrumb.scss' as *;
@use './element-ui.scss' as *;


.hover-stress {
  color: var(--o-color-info2);
  &:hover {
    color: var(--o-color-info1) !important;
  }
}

.hover-underline {
  --link-color-hover: var(--o-color-link1);
  --link-underline-x: 100%;
  background: linear-gradient(0deg, var(--link-color-hover), var(--link-color-hover)) no-repeat var(--link-underline-x) bottom;
  background-size: 0 1px;
  transition: background-size var(--o-easing-standard) var(--o-duration-m2);

  &:hover {
    background-size: var(--link-underline-x) 1px;
    background-position-x: left;
  }
}

.hover-icon-rotate {
  .o-icon {
    transition: all var(--o-duration-m1) var(--o-easing-standard-in);
  }

  &:hover {
    .o-icon {
      transform: rotate(-180deg);
    }
  }
}
